<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>底部弹出广告</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            width: 300px;
            height: 480px;
            position: fixed;
            bottom: 0;
            right: 0;
            display: none;
        }
        .close {
            position: absolute;
            top: 0;
            right: 0;
            width: 40px;
            height: 18px;
            background: url('./imgs/h.jpg') no-repeat;
            cursor: pointer;
        }
    </style>
    <script src="../lib/jquery-3.4.1.js"></script>
    <script>
        $(function(){
            // 链式写法  .
          /*   $(".box")
            .stop()
            .slideDown(1000*4)
            .children("span.close")
            .on('click',function(){
                $(this).parent("div.box").slideUp(1000 * 4);
            }); */
            $(".box").stop().slideDown(1000*2);
            
            var target = -300;
            var leader = 0;
            var timer = null;
            var divWidth = $(".box").width();

            // console.log(divWidth)
            $(".close").on('click',function(){
                var that = this;
               var divBox =  $(this).parent("div.box").slideUp(1000 * 4);

                // 开启定时器
                setTimeout(function(){
                    // 2秒后让 盒子向下的动画停止，开始向右移动
                    divBox.stop();
                    // $(".box").css("right","-300px");
                    clearInterval(timer);
                    timer = setInterval(function(){
                        // 缓动学公式
                        // leader = leader + (target - leader)/10;
                        /*
                            次数    target      leader 
                            1       -300          -30  
                            2       -300        -30+（-27）= -57
                            3       -300        -57+ （-24.3）=-81.3
                            ...
                        */
                        leader -=5;
                        if(leader<-divWidth){
                            clearInterval(timer);
                        }

                        // $(".box").css("right",leader);
                        // this 关键字
                        console.log($(that).parent("div.box"));
                        console.log( $(that).parent("div.box")[0]);
                        // jquery 对象 和 DOM 对象 转换
                        $(that).parent("div.box")[0].style.right = leader + "px";
                    },50);
                },1000 * 2);
            });
        });
    </script>
</head>
<body>
    <div class="box">
        <img src="./imgs/ad.jpg" alt="广告图片">
        <span class="close"></span>
    </div>
</body>
</html>